<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    import 'ol/ol.css'
    import { Map, View } from 'ol'
    import Tile from 'ol/layer/Tile'
    import BingMaps from 'ol/source/BingMaps'
    import TileJSON from 'ol/source/TileJSON'

    const state = reactive({
      map1: null,
      map2: null,
      map1Box: ref(null),
      map2Box: ref(null),
      mapView: new View({
        projection: 'EPSG:4326',
        center: [116.41400, 39.91500],
        zoom: 7
      }),
      layer1: new Tile({
        title: 'bigMap',
        source: new BingMaps({
          key: 'AiZrfxUNMRpOOlCpcMkBPxMUSKOEzqGeJTcVKUrXBsUdQDXutUBFN3-GnMNSlso-',
          imagerySet: 'Aerial'
        })
      }),
      layer2: new Tile({
        source: new TileJSON({
          url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
          crossOrigin: ''
        })
      })
    })

    const init = () => {
      state.map1 = new Map({
        target: state.map1Box,
        layers: [state.layer1],
        view: state.mapView
      })

      state.map2 = new Map({
        target: state.map2Box,
        layers: [state.layer2],
        view: state.mapView
      })
    }
    `
    return {
      code
    }
  }
}
</script>
